<template>
  <view>
    <view class="box_3 flex-row">
      <image class="image_3" referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psd9hxah0z6nrr823fvco2ao5nl852au9kx65fa0d25-021e-4484-96cf-5097d3f2a212" />
      <text class="text_1">上传图片</text>
    </view>
    <view class="box_4 flex-col">
      <view class="text-wrapper_1 flex-row justify-between">
        <text class="text_2">签署图片</text>
        <text class="text_3">（已选择{{img.length||0}}张）</text>
      </view>
      <view class="group_1 ">

        <view class="image-wrapper_1" v-for="(item,index) in img" :key="index">
          <!-- <image class="image_4" referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjpf0henvmckfeuca60hq740blpxqvhp14333391-8abe-4acf-be3a-8068e857d27d" /> -->
          <image class="image_4" :src="item[0]" mode=""></image>
          <view class="text-wrapper_4" @click="deleteImg(index)">
            <text class="text_6">×</text>
          </view>
        </view>

        <view class="text-wrapper_2 flex-col" @click="addImg()">
          <text class="text_4">＋</text>
        </view>
      </view>
      <view class="text-wrapper_3 flex-col">
        <text class="text_5" @click="toNext">下&nbsp;一&nbsp;步</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        img: [] //存储照片
      }
    },
    methods: {
      //点击下一步
      async toNext(){
        console.log('下一步')
        
      },
      //添加图片
      addImg() {
        uni.chooseImage({
          count: 3, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
        	 success: (res) => {
        		  this.img.push(res.tempFilePaths)
            // console.log(this.img)
          }
        });
      },
      //删除图片
      deleteImg(index) {
        this.img.shift(index, 1)
      }
    }
  }
</script>

<style scoped>
  .box_3 {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psvp027hlrytcb60mcxt6ffnop0b5a6yuza9ac0a90d-d8c5-4ac3-a72e-b96f7430c9d7) 100% no-repeat;
    background-size: 100% 100%;
  }

  .image_3 {
    width: 20rpx;
    height: 35rpx;
    margin: 35rpx 0 0 31rpx;
  }

  .text_1 {
    width: 145rpx;
    height: 35rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 37rpx 306rpx 0 248rpx;
  }

  .box_4 {
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    width: 750rpx;
    height: 1190rpx;
  }

  .text-wrapper_1 {
    width: 290rpx;
    height: 29rpx;
    margin: 49rpx 0 0 62rpx;
  }

  .text_2 {
    width: 116rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 1rpx;
  }

  .text_3 {
    width: 154rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .group_1 {
    display: flex;
    flex-wrap: wrap;
    height: 204rpx;
    margin: 63rpx 0 0 60rpx;
  }

  .image-wrapper_1 {
    margin: 10rpx;
    background-color: rgba(255, 255, 255, 1);
    height: 204rpx;
    border: 2px solid rgba(191, 191, 191, 1);
    width: 192rpx;
  }

  .image_4 {
    width: 195rpx;
    height: 205rpx;
    /* margin: 33rpx 0 0 21rpx; */
  }

  .text-wrapper_2 {
    height: 204rpx;
    border: 2px dashed rgba(205, 173, 102, 1);
    width: 192rpx;
    margin-left: 10rpx;
    margin-top: 10rpx;
  }

  .text_4 {
    width: 68rpx;
    height: 73rpx;
    overflow-wrap: break-word;
    color: rgba(205, 173, 102, 1);
    font-size: 100rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    line-height: 24rpx;
    margin: 76rpx 0 0 44rpx;
  }

  .text-wrapper_3 {
    background-color: rgba(205, 173, 102, 1);
    border-radius: 30px;
    height: 86rpx;
    width: 570rpx;
    margin: 743rpx 0 16rpx 89rpx;
  }

  .text_5 {
    width: 141rpx;
    height: 33rpx;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: SimHei;
    text-align: center;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 27rpx 0 0 216rpx;
  }

  .text-wrapper_4 {
    position: absolute;
    margin-left: 170rpx;
    margin-top: -230rpx;
    background-color: rgba(204, 204, 204, 0.98);
    border-radius: 50%;
    height: 40rpx;
    width: 40rpx;

  }

  .text_6 {
    width: 16rpx;
    height: 16rpx;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 8rpx 0 0 8rpx;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }
</style>
